<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-dashboard"></i>
              监控仪表板
            </h1>
            <p class="page-subtitle">实时监控数据展示和Grafana仪表板集成</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_monitored_hosts || 0 }}</div>
              <div class="stat-label">监控主机</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_active_alerts || 0 }}</div>
              <div class="stat-label">活跃告警</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.connected_servers || 0 }}</div>
              <div class="stat-label">在线服务器</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Grafana仪表板嵌入区域 -->
      <!-- Grafana监控仪表板 -->
      <div class="dashboard-section glass-effect">
        <div class="section-title">
          <i class="fa fa-chart-line"></i>
          Grafana监控仪表板
        </div>

        <!-- Grafana仪表板嵌入组件 -->
        <GrafanaEmbed
          height="700px"
          :auto-refresh="true"
          :refresh-interval="30000"
        />
      </div>

      <!-- 实时监控数据 -->
      <div class="realtime-section glass-effect">
        <div class="section-title">
          <i class="fa fa-pulse"></i>
          实时监控数据
        </div>

        <RealTimeMonitoring />
      </div>

      <!-- 快速监控指标 -->
      <div class="metrics-section">
        <div class="metrics-grid">
          <div class="metric-card glass-effect">
            <div class="metric-header">
              <i class="fa fa-server"></i>
              <span>系统负载</span>
            </div>
            <div class="metric-value">{{ systemMetrics.load || 'N/A' }}</div>
            <div class="metric-trend">
              <i class="fa fa-arrow-up" style="color: #ef4444;"></i>
              +2.3%
            </div>
          </div>

          <div class="metric-card glass-effect">
            <div class="metric-header">
              <i class="fa fa-memory"></i>
              <span>内存使用</span>
            </div>
            <div class="metric-value">{{ systemMetrics.memory || 'N/A' }}%</div>
            <div class="metric-trend">
              <i class="fa fa-arrow-down" style="color: #22c55e;"></i>
              -1.2%
            </div>
          </div>

          <div class="metric-card glass-effect">
            <div class="metric-header">
              <i class="fa fa-hdd"></i>
              <span>磁盘使用</span>
            </div>
            <div class="metric-value">{{ systemMetrics.disk || 'N/A' }}%</div>
            <div class="metric-trend">
              <i class="fa fa-arrow-up" style="color: #f59e0b;"></i>
              +0.5%
            </div>
          </div>

          <div class="metric-card glass-effect">
            <div class="metric-header">
              <i class="fa fa-network-wired"></i>
              <span>网络流量</span>
            </div>
            <div class="metric-value">{{ systemMetrics.network || 'N/A' }} MB/s</div>
            <div class="metric-trend">
              <i class="fa fa-arrow-up" style="color: #06b6d4;"></i>
              +5.7%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { monitoringApi } from '@/api/monitoring'
import GrafanaEmbed from '@/components/GrafanaEmbed.vue'
import RealTimeMonitoring from '@/components/RealTimeMonitoring.vue'

// 响应式数据
const loading = ref(false)

// 统计数据
const statistics = reactive({
  total_monitored_hosts: 0,
  total_active_alerts: 0,
  connected_servers: 0
})

// 系统指标
const systemMetrics = reactive({
  load: '1.23',
  memory: '68',
  disk: '45',
  network: '12.5'
})



// 页面加载
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    await loadStatistics()
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const response = await monitoringApi.getOverview()
    if (response.data.success) {
      Object.assign(statistics, response.data.data)
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 加载仪表板列表
const loadDashboards = async () => {
  if (!selectedGrafanaServer.value) return

  try {
    const response = await monitoringApi.getGrafanaDashboards()
    if (response.data.success) {
      dashboards.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载仪表板失败:', error)
    ElMessage.error('加载仪表板失败')
  }
}


</script>

<style scoped>
/* 使用与Inventory管理页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px 20px 100px 20px; /* 增加底部padding避免被footer遮挡 */
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section h1 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-section h1 i {
  color: #a4f4ba;
  margin-right: 12px;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #a4f4ba;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-section {
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

.dashboard-controls {
  margin-bottom: 20px;
}

.control-form {
  margin: 0;
}

.dashboard-iframe-container {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(164, 244, 186, 0.2);
}

.dashboard-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.no-dashboard {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-dashboard-content {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.no-dashboard-content i {
  font-size: 48px;
  color: #a4f4ba;
  margin-bottom: 20px;
}

.no-dashboard-content h3 {
  margin: 0 0 10px 0;
  color: rgba(255, 255, 255, 0.8);
}

.metrics-section {
  margin-top: 30px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metric-card {
  padding: 20px;
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.metric-header i {
  color: #a4f4ba;
}

.metric-value {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* 按钮样式 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }
}

/* 表单样式 */
:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-select) {
  .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 6px !important;
  }

  .el-input__inner {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
}
</style>
